<template>
  <div class="map-wrap">
    <div id="main" style="width: 100%;height:100%;"></div>
  </div>
</template>

<script>
// import echarts from 'echarts'
var option = {
  series: [
    {
      name: "南宁市地图",
      type: "map",
      mapType: "NanNing", // 自定义扩展图表类型
      zoom: 1.2,
      roam: true,
      itemStyle: {
        color: "#ccc",
        areaColor: "#147dff",
        borderColor: "#fff",
        borderWidth: 0.5,
        normal: { label: { show: true } },
        label: {
          show: true,
          textStyle: {
            color: "#fff"
          }
        }
      },
      emphasis: {
        itemStyle: {
          // areaColor: true,
          borderColor: "#fff",
          areaStyle: {
            color: "#fff"
          },
          label: {
            show: true,
            textStyle: {
              color: "#fff"
            }
          }
        }
      },
      data: [
        { name: "青秀区", selected: false, value: 1 },
        { name: "西乡塘区", selected: false, value: 2 },
        { name: "江南区", selected: false, value: 3 },
        { name: "良庆区", selected: false, value: 4 },
        { name: "邕宁区", selected: false, value: 5 },
        { name: "兴宁区", selected: false, value: 6 },
        { name: "武鸣区", selected: false, value: 7 },
        { name: "横县", selected: false, value: 8 },
        { name: "马山县", selected: false, value: 9 },
        { name: "宾阳县", selected: false, value: 10 },
        { name: "隆安县", selected: false, value: 11 },
        { name: "上林县", selected: false, value: 12 }
      ]
    }
  ],
  dataRange: {
    x: "-1000 px", //图例横轴位置
    y: "-1000 px", //图例纵轴位置
    splitList: [
      { start: 1, end: 1, label: "青秀区", color: "#cfc5de" },
      { start: 2, end: 2, label: "西乡塘区", color: "#f1ebd1" },
      { start: 3, end: 3, label: "江南区", color: "#feffdb" },
      { start: 4, end: 4, label: "良庆区", color: "#e0cee4" },
      { start: 5, end: 5, label: "邕宁区", color: "#fde8cd" },
      { start: 6, end: 6, label: "兴宁区", color: "#e4f1d7" },
      { start: 7, end: 7, label: "武鸣区", color: "#fffed7" },
      { start: 8, end: 8, label: "横县", color: "#e4f1d7" },
      { start: 9, end: 9, label: "马山县", color: "#e4f1d7" },
      { start: 10, end: 10, label: "宾阳县", color: "#fffed7" },
      { start: 11, end: 11, label: "隆安县", color: "#fffed8" },
      { start: 12, end: 12, label: "上林县", color: "#dccee7" }
    ]
  }
};
console.log(this.$route)
var titleName = "450100";
var echarts = require("echarts");


export default {
  mounted() {
    let $this = this;
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    // myChart.showLoading();
    $.get(`src/data/${titleName}.json`, function(geoJson) {
      echarts.registerMap("NanNing", geoJson);
      myChart.setOption(option);
    });
     myChart.on("click", function(params) {
        let current = "";
        switch (params.name) {
          case "青秀区":
          current = "qingxiu";
          if (titleName == 'qingxiu') {
              titleName = '450100'
              $this.$router.push({
                path: "/"
              });
              return
          }
          $this.$router.push({
                    path: "/detail/" + current
              });
          titleName = 'qingxiu'
            return;
            break;
          case "西乡塘区":
            current = "xixiangtang";
            break;
          case "江南区":
            current = "jiangnan";
            break;
          case "良庆区":
            current = "liangqing";
            break;
          case "邕宁区":
            current = "yongning";
            break;
          case "兴宁区":
            current = "xingning";
            break;
          case "武鸣区":
            current = "wuming";
            break;
          case "马山县":
            current = "mashan";
            break;
          case "上林县":
            current = "shanglin";
            break;
          case "横县":
            current = "hengxian";
            break;
          case "隆安县":
            current = "longan";
            break;
          case "宾阳县":
            current = "binyang";
            break;
          default:
            break;
        }
        $this.$router.push({
          path: "/detail/" + current
        });
      });
  },
  modules: {
  }
};
</script>

<style scoped>
.map-wrap {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 52vh;
  overflow: hidden;
}
</style>
